<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
.content{
	padding: 1rem 2.5rem;
}
.txt{
	padding-top: 0.7rem;
	padding-bottom: 1.2rem;
}
.dotted{
	border-bottom: 1px dotted #eee;

}
.mei{
	padding-top: 0.7rem;
	padding-bottom: 0.8rem;
}
.p-4{
	padding-left: 0.4rem;
}
.input{
}
.bom{
	position: absolute;
	width: 12.5rem;
	height: 2.5rem;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	line-height: 2.5rem;
	bottom: 3rem;
	background-image: linear-gradient(0deg, #E73250 23%, #FA7D83 100%);
	border-radius: 100px;
	font-size:0.8rem;
	text-align: center;
	color:#fff;
}
.bom.disabled {
	opacity: 0.5;
}
.success{
	padding-top: 0.7rem;
	text-align: center;
	padding-bottom: 1.2rem;
	border-bottom: 1px dotted #eee;
}
.info{
	line-height: 30px;
	padding: 0.5rem 0;
}
.pl{
	margin-left: 2rem;
	text-align: left;
}
	.quxiao {
		position: absolute;
		right: 0;
		top: 0;
		width: 1.5rem;
		height: 100%;
		background: url(../../image/common/12.png) no-repeat center center;
		background-size: 0.7rem auto;
	}
	.successBox {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 2rem;
		background: #FFF;
		z-index: 10;
	}
</style>
</head>
<body>
<div id="app" class="content">
	<div class="">
		<div class="aui-flex-col aui-font-size-12 color-333">
			<img :src="postInfo.user_avatar" style="height:1rem;border-radius: 50%;" alt="">
			<div class="p-4">{{postInfo.user_nickname}}</div>
		</div>
		<div class=" txt aui-font-size-16 color-333 text-bold dotted">“点赞是美德，打赏是鼓励”</div>
		<div class="aui-flex-col aui-font-size-12 color-333 mei">
			<img :src="userInfo.user_avatar" style="height:1rem;border-radius: 50%;" alt="">
			<div class="p-4">积分打赏（枚）</div>
		</div>
		<div class="aui-flex-col aui-flex-between aui-flex-middle aui-font-size-16 color-333 text-bold aui-border-b relative">
			<input v-model.number="money" class="input" type="tel">
			<div class="quxiao" v-show="money" tapmode onclick="vuedata.money=''"></div>
		</div>
		
		<div class="infoTxt02 right-arrow aui-font-size-12 aui-margin-t-15" v-if="money > userInfo.user_point" tapmode onclick="openRule();">
			<div>已超过总积分数，快去赚积分吧！</div>
		</div>
		<div class="infoTxt01 right-arrow aui-font-size-12 aui-flex-col aui-flex-between aui-margin-t-15" v-else>
			<div class="color-333" id="text">可用积分 {{userInfo.user_point}}枚</div>
			<div class="aui-padded-r-15 text2" tapmode onclick="openRule();">赚积分</div>
		</div>
	</div>
	<div class="bom" :class="{ 'disabled' : !money || money>userInfo.user_point }" tapmode onclick="save();">打赏</div>
	
	<!-- success -->
	<transition name="fade">
	<div class="successBox" v-if="saveSuccess==1" >
		<div>
			<img src="../../image/common/28.png" style="height:2rem;margin:0 auto" alt="">
			<div class="success aui-font-size-16 color-333">打赏成功</div>
		</div>
		<div class="info aui-flex-col dotted aui-font-size-12 color-333">
			<div>
				<div>打赏积分（枚）</div>
				<div>打赏给</div>
				<div>剩余积分（枚）</div>
			</div>
			<div class="pl">
				<div>{{money}}</div>
				<div>{{postInfo.user_nickname}}</div>
				<div>{{ userInfo.user_point - money }}</div>
			</div>
		</div>
	</div>
	</transition>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/dom7.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var vm;
var vuedata = {
	saveSuccess: '',		//打赏成功
	money: '',		//打赏金额
	userInfo: {},
	postInfo: {}
};
vm = new Vue({
	el: '#app',
	data: vuedata
});
var isSave = false;
apiready = function(){
	api.parseTapmode();
	vuedata.postInfo = api.pageParam.postInfo;
	vuedata.userInfo = getUserinfo();
};
//积分规则
function openRule(){
	api.openWin({
		name: 'money_rule_win',
		url: '../mine/money_rule_win.html'
	});
}
//打赏
function save(){
	if(isSave){
		return;
	}
	isSave = true;
	var postData = {
		userid: vuedata.userInfo.userid,
		yo_count: vuedata.money,
		article_id: vuedata.postInfo.article_id,
		article_userid: vuedata.postInfo.article_userid
	}
	api.ajax({
		url: BASE_URL + 'App/Article/yoReward',
		method: 'post',
		data: {
			values: postData
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			vuedata.saveSuccess = 1;
			api.sendEvent({
				name: 'ubUpdateEvent'
			});
			api.execScript({
				name: 'post_detail_win',
				script: 'ub()'
			});
			setTimeout(function(){
				api.closeWin();
			},2000);
		} else {
			toast('操作失败');
		};
	});
}
</script>
</html>
